<template>
  <el-row>
    <el-col :span="24">
      <ReceiptForm v-model="receipt"
                   :hidden-fields="hiddenFields" />
      <span>如需上传回单照片，请点击
        <el-button type="text"
                   @click="go">上传照片</el-button>
      </span>
    </el-col>
    <el-col :span="24">
      <div class="footer">
        <el-button type="default"
                   @click="handleCancel">取消</el-button>
        <el-button type="primary"
                   :loading="loading"
                   @click="handleSubmit">确定</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import axios from 'axios';
import _ from 'lodash'
export default {
  name: "OrderReceipt",
  props: {
    orderId: Number
  },
  data () {
    return {
      loading: false,
      receipt: {
        receiptType: 0,
        receiptTime: this.$moment(new Date()).format("YYYY-MM-DD 23:59:00"),
      },
      hiddenFields: ["receiptDesc", "receiptSignTime", "syncUpAttachments"],
    };
  },
  computed: {
  },
  methods: {
    go () {
      // const { href } = 
      this.$router.push({
        name: 'orderDetails',
        query: {
          orderId: this.orderId
        }
      });
      // window.open(href, "_self");
    },
    handleSubmit: _.debounce(function () {    // 触发事件
      this.loading = true;
      this.submit();
    }, 600),
    async submit () {
      const url = "/order/receipt";
      const receipt = {
        exception: this.receipt.receiptType,
        receiptTime: this.receipt.receiptTime,
        orderId: this.orderId
      }
      const { message, code } = await axios.put(url, receipt)
        .catch(() => {
          this.loading = false;
          return this.$message({ type: "error", message });
        });
      if (code === 0) {
        this.loading = false;
        this.$message({ type: "success", message: "回单成功" });
        this.$emit("confirm", receipt);
      }
    },
    handleCancel () {
      this.$emit("cancel");
    }
  },
};
</script>

<style>
.max-height-box {
  max-height: 400px;
}
</style>
